import { FC, useState } from "react";
import { View, Text } from "@tarojs/components";
import styles from "./index.module.less";
import HIcon from "@/components/Icon";
import { UserInfo } from "@/service/type";

interface IProps {
  starFlag: boolean;
  customerInfo: UserInfo;
  onStar: () => void;
}

const MemberOverView: FC<IProps> = ({ starFlag, customerInfo, onStar }) => {
  return (
    <View className={styles["overview-wrapper"]}>
      <View className={styles["title"]}>
        <Text className={styles["name"]}>{customerInfo.nickName}</Text>
        <HIcon
          className={styles["icon"]}
          type={customerInfo.gender === "1" ? "nan" : "nv"}
          color="#4EA7FB"
          size={36}
        ></HIcon>
        {customerInfo.certificationState === "1" && (
          <>
            <HIcon
              className={styles["icon"]}
              type="zhuanjifenshimingrenzheng"
              color="#FA8D00"
            ></HIcon>
            <Text style={{ color: "#FA8D00", fontSize: "12px" }}>实名</Text>
          </>
        )}
      </View>
      <View className={styles["label-wrapper"]}>
        <View className={styles["left"]}>
          <Text className={styles["lb"]}>{customerInfo.age}岁</Text>
          <Text className={styles["lb"]}>
            {customerInfo.customerBasicInfo?.chineseZodiacCn}
          </Text>
          <Text className={styles["lb"]}>
            {customerInfo.customerBasicInfo?.height}cm
          </Text>
          <Text className={styles["lb"]}>
            {customerInfo.customerBasicInfo?.educationCn}
          </Text>
          <Text className={styles["lb"]}>
            {customerInfo.customerEconomicInfo?.annualSalaryCn}
          </Text>
          <Text className={styles["lb"]}>
            {customerInfo.customerEconomicInfo?.houseCn}
          </Text>
          <Text className={styles["lb"]}>
            {customerInfo.customerBasicInfo?.marriageHistoryCn}
          </Text>
        </View>
        <View className={styles["right"]} onClick={onStar}>
          <HIcon
            className="icon"
            type="aixin1"
            size={44}
            color={starFlag ? "#ee4042" : "#e1e1e1"}
          ></HIcon>
        </View>
      </View>
      <View className={styles["hint"]}>高质量相亲交友平台</View>
    </View>
  );
};

export default MemberOverView;
